<template>
  <m-list-construction title="运营中心">
    <template slot="operation">
      <!-- <el-button type="primary" size="mini">全部</el-button>
      <el-button type="primary" plain size="mini">通用算力</el-button>
      <el-button type="primary" plain size="mini">智算算力</el-button>
      <el-button type="primary" plain size="mini">超算算力</el-button> -->
    </template>
    <template slot="content">
      <div class="perject-home-content">
        <taskMonthCount></taskMonthCount>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="title">
              <span>{{ $t("Task status statistics") }}</span>

            </div>
            <el-card shadow="never" body-style="height:560px;">
              <m-task-status-count :search-params="searchParams">
              </m-task-status-count>
            </el-card>
          </el-col>
          <el-col :span="12">
            <div class="title">
              <span>{{ $t("Process Status Statistics") }}</span>
              <el-date-picker v-model="dataTime" type="datetimerange" size="mini" @change="_datepicker" range-separator="-"
                              :start-placeholder="$t('startDate')" :end-placeholder="$t('endDate')"
                              value-format="yyyy-MM-dd HH:mm:ss" style="width:200px;">
              </el-date-picker>
            </div>
            <el-card shadow="never" body-style="height:560px;">
              <m-process-state-count :search-params="searchParams">
              </m-process-state-count>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </template>
  </m-list-construction>
</template>
<script>
  import { mapState } from 'vuex'
  import dayjs from 'dayjs'
  import mTaskStatusCount from './_source/taskStatusCount'
  import mProcessStateCount from './_source/processStateCount'
  import taskMonthCount from './_source/taskMonthCount'
  import mListConstruction from '@/module/components/listConstruction/listConstruction'

  export default {
    name: 'projects-index-index',
    data () {
      return {
        searchParams: {
          projectCode: null,
          startDate: '',
          endDate: ''
        },
        dataTime: []
      }
    },
    methods: {
      _datepicker (val) {
        this.searchParams.startDate = val[0]
        this.searchParams.endDate = val[1]
      }
    },
    created () {
      this.searchParams.projectCode =
        this.$route.params.projectCode == null
          ? 0
          : this.$route.params.projectCode
      this.dataTime[0] = dayjs().format('YYYY-MM-DD 00:00:00')
      this.dataTime[1] = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.searchParams.startDate = this.dataTime[0]
      this.searchParams.endDate = this.dataTime[1]
    },
    components: {
      mListConstruction,
      mTaskStatusCount,
      mProcessStateCount,
      taskMonthCount
    },
    computed: {
      ...mapState('dag', ['projectName'])
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
.perject-home-content {
    padding: 20px 0px;
    position: relative;
    .time-model {
        .ans-input {
            > input {
                width: 344px;
            }
        }
    }
    .title {
        font-size: 18px;
        font-weight: 600;
        height: 28px;
        margin: 15px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .chart-title {
        text-align: center;
        height: 60px;
        line-height: 60px;
        span {
            font-size: 22px;
            color: #333;
            font-weight: bold;
        }
    }
}
.table-small-model {
    .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }
}
</style>
